<template>
  <!-- 
  目标: 具名插槽
  语法: v-solt:  可以简写为 #
  使用场景: 两处以上不确定标签名 需要用slot标签占位  问题:这两处如何区分  各个给一个name属性
  1. slot占位并用用name属性
  2. 用组件时 用 template配合 v-slot:插槽名 来传入具体的标签
  -->

  <div id="container">
    <div id="app">
      <h3>案例：折叠面板</h3>
      <Pannel>
        <template v-slot:title>
          <h4>具名插槽 不确定的标题1</h4>
        </template>
        <!-- 里面的内容并不会被渲染 -->
        <template #content>
          <img
            src="https://img.alicdn.com/imgextra/i4/O1CN01HGhduk1a3XUaa2jbf_!!6000000003274-2-tps-198-200.png"
          />
          <span>我被替换了</span>
        </template>
      </Pannel>


      <Pannel>
        <template v-slot:title>
          <h4>不确定的标题2</h4>
        </template>
        <template #content>
          <p>寒雨连江夜入吴,</p>
        </template>
      </Pannel>
    </div>
  </div>
</template>

<script>
import Pannel from '../components/03/Pannel.vue'
export default {
  components: {
    Pannel
  }
}
</script>

<style>
#app {
  width: 400px;
  margin: 20px auto;
  background-color: #fff;
  border: 4px solid blueviolet;
  border-radius: 1em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 1em 2em 2em;
}
</style>